import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yp/config/index.dart';
import 'package:yp/router.dart';
import 'package:yp/widgets/index.dart';
import 'package:yp/widgets/line.dart';
import 'package:yp/widgets/navigation_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 支付成功
class PaySuccess extends StatefulWidget {
  const PaySuccess({Key key}) : super(key: key);

  @override
  _PaySuccessState createState() => _PaySuccessState();
}

class _PaySuccessState extends State<PaySuccess>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YPNavigationBar( '支付成功'),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Column(
              children: [_successHesder(), _guessLickTitle(), _guessLick()],
            ),
          )
        ],
      ),
    );
  }

  /// 支付成功 头部
  Widget _successHesder() {
    return Column(children: [
      Padding(
        padding: const EdgeInsets.only(top: 40, bottom: 15),
        child: Image(
          image: AssetImage('assets/images/selectIcon1.png'),
          width: 48.w,
        ),
      ),
      Text('订单编号：12345678901',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
              color: EsColors.TitleSecondary,
              fontSize: EsSizes.MD,
              fontWeight: EsFontWeights.Normal)),
      Text('实付：￥289.00',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
              color: EsColors.TitleSecondary,
              fontSize: EsSizes.MD,
              fontWeight: EsFontWeights.Normal)),
      Text('本次购物共获取40积分~',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
              color: EsColors.TitleSecondary,
              fontSize: EsSizes.MD,
              fontWeight: EsFontWeights.Normal)),
      SizedBox(height: 10),
      OutlinedButton(
          onPressed: () {
            print('查看详情');
            Get.toNamed(RouteConfig.orderDetail);
          },
          style: OutlinedButton.styleFrom(
            padding: EdgeInsets.fromLTRB(15, 6, 15, 6),
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
            side:
                BorderSide(color: EsColors.Primary.withOpacity(0.5), width: 1),
          ),
          child: Text(
            '查看详情',
            style: TextStyle(
                color: EsColors.Primary,
                fontSize: EsSizes.MD,
                fontWeight: EsFontWeights.Normal),
          )),
      SizedBox(height: 15),
    ]);
  }

  /// 猜你喜欢
  Widget _guessLickTitle() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 30),
      child: Row(
        children: [
          Expanded(child: YpLine()),
          Container(
            width: 5,
            height: 5,
            decoration: BoxDecoration(
              color: EsColors.BackGround,
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          SizedBox(width: 10),
          Text('猜你喜欢',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                  color: EsColors.TitleSecondary,
                  fontSize: EsSizes.LG,
                  fontWeight: EsFontWeights.Medium)),
          SizedBox(width: 10),
          Container(
            width: 5,
            height: 5,
            decoration: BoxDecoration(
              color: EsColors.BackGround,
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          Expanded(child: YpLine()),
        ],
      ),
    );
  }

  /// 猜你喜欢
  Widget _guessLick() {
    return Padding(
      padding: EdgeInsets.only(
          left: 12,
          right: 12,
          top: 20,
          bottom: MediaQuery.of(context).padding.bottom + 10),
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        children: List.generate(
            30,
            (index) => GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {
                    print('点击猜你喜欢的商品详情');
                  },
                  child: Container(
                    decoration: EsDecoration.BoxShadowDefault,
                    width: MediaQuery.of(context).size.width / 2 - 18,
                    padding:
                        const EdgeInsets.only(left: 12, right: 12, bottom: 16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        CachedImage(
                          path:
                              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.ctoutiao.com%2Fuploads%2F2018%2F09%2F28%2F1538109470481327.jpg&refer=http%3A%2F%2Fimg2.ctoutiao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633178400&t=df239acca35b2e8277324214c3ae605f',
                          width: MediaQuery.of(context).size.width / 2 - 24,
                          height: MediaQuery.of(context).size.width / 2 - 24,
                        ),
                        Text('进口草莓',
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                color: EsColors.TitleSecondary,
                                fontSize: EsSizes.MD,
                                fontWeight: EsFontWeights.Normal)),
                        SizedBox(height: 16),
                        RichText(
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          text: TextSpan(
                              text: '￥278  ',
                              style: TextStyle(
                                  fontSize: EsSizes.LG,
                                  color: EsColors.Primary,
                                  fontWeight: EsFontWeights.Medium),
                              children: <TextSpan>[
                                TextSpan(
                                    text: '￥20',
                                    style: TextStyle(
                                        decoration: TextDecoration.lineThrough,
                                        fontSize: EsSizes.XS,
                                        color: EsColors.ContentSecondary,
                                        fontWeight: EsFontWeights.Medium)),
                              ]),
                        ),
                      ],
                    ),
                  ),
                )),
      ),
    );
  }
}
